<template>
  <view class="phxx-item">
    <view class="phxx-item-content" style="position: relative;">

      <view class="status-item-box" :class="{'gray-type': itemList.status == 3 || itemList.status == 4,'orange-type': itemList.status == 1,'blue-type': itemList.status == 2,
								'status': true}">{{ priceStatusObj[itemList.status]}}</view>
      <view class="body-box">
        <view class="bottom">
          <view class="items">
            <text class="til">产品价格</text>
            <text class="val">{{ itemList.freight || 0}}元/吨</text>
          </view>
        </view>
        <view class="bottom">
          <view class="items">
            <text class="til">执行时间</text>
            <text class="val">{{ itemList.exetime || ''}}</text>
          </view>
        </view>
        <view class="bottom">
          <view class="items">
            <text class="til">结束时间</text>
            <text class="val">{{ itemList.etime || ''}}</text>
          </view>
        </view>
        <!-- <view class="bottom">
          <view class="items">
            <text class="til">操作人</text>
            <text class="val">{{ itemList.operatorName || '' }}</text>
          </view>
        </view> -->
      </view>
      <view class="bottom-btn" v-if="itemList.status == 1 && showValidBtn && showERP">
        <view>
          <button class="cancelBtn" size="mini" @click.stop="oncancelFun(itemList)">作废</button>
        </view>
      </view>
    </view>
    <!-- 作废 -->
    <uni-popup ref="confirmDialog" type="dialog">
      <uni-popup-dialog :type="msgType" cancelText="否" confirmText="是" :title="titleName" content="您确认作废该次调价吗？"
        @confirm="dialogConfirm"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
  import {
    getDriverId, getTenantId
  } from '@/utils/auth'
  import {
    toast, getButtonShow
  } from '@/utils/common';
  import config from '@/config';
  import {
    cancelAdjustPrice
  } from '@/api/tranplan.js';
  export default {
    name: 'row-number',
    props: {
      priceStatusObj: {
        type: Object,
        default: {}
      },
      itemList: {
        type: Object,
        default: {
          vehicleNo: '',
          driverName: '',
          queueStatusName: '',
          customerName: '',
          coalSubtypeName: '',
          loadingSiteName: '',
          queueTime: '',
          callNumberTime: ''
        }
      },
      showValidBtn: {
        type: Boolean,
        default: true
      },
      showERP: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        transStatusLists: [],
        transId: undefined,
      }
    },
    computed: {
      imagesPath() {
        if (this.$store.state.user.curTypeColor == "#D22C2C") {
          return config.baseImgUrl + '/code1.png'
        } else if (this.$store.state.user.curTypeColor == "#409EFE") {
          return config.baseImgUrl + '/code.png'
        } else {
          return config.baseImgUrl + '/code.png'
        }
      }
    },
    methods: {
      oncancelFun(item) {
        this.transId = item.id
        this.$refs['confirmDialog'].open();
      },
      async dialogConfirm() {
        let res = await cancelAdjustPrice({ id: this.transId })
        if (res.code == 0) {
          toast("作废成功")
          this.$refs['confirmDialog'].close();
          this.$emit('manualCalling');
        } else {
          toast(res.msg)
        }
      },
    }
  };
</script>

<style lang="scss" scoped>
  .phxx-item {
    width: 710rpx;
    position: relative;
    padding: 24rpx 20rpx;
    box-sizing: border-box;
    margin: 0 auto 20rpx;
    border-radius: 20rpx;
    background: #fff;
    font-size: 26.66rpx;
    color: #000;

    .phxx-item-content {
      width: auto !important;

      .body-box {
        background: linear-gradient(180deg, #e8f3ff, white 100%) !important;
        padding: 20rpx;
      }

      .status-item-box {
        position: absolute;
        right: 18rpx;
        top: 20rpx;
      }

      .status {
        font-size: 26.66rpx;
        padding: 0 10rpx;
        text-align: center;
        border-radius: 10rpx;
        display: block;
        height: 29px;
        line-height: 29px;
        min-width: 110rpx;
      }
    }
  }

  button {
    font-size: 30.22rpx !important;
    background: #409eff !important;
    color: #fff !important;
  }
</style>